<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>layui</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport"
	content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="layuiadmin/layui/css/layui.css" media="all">
</head>
<body>
	<!-- 搜索 -->
	<div class="demoTable">
		评论搜索：
		<div class="layui-inline">
			<input class="layui-input" name="id" id="demoReload"
				autocomplete="off">
		</div>
		<button class="layui-btn" data-type="reload">搜索</button>
	</div>

	<table class="layui-hide" id="test" lay-filter="test"></table>

	<script type="text/html" id="toolbarDemo">
			<div class="layui-btn-container">
				<button class="layui-btn layui-btn-sm" lay-event="getCheckLength">获取选中数目</button>
				<button class="layui-btn layui-btn-sm" lay-event="isAll">验证是否全选</button>
			</div>
		</script>

	<script type="text/html" id="barDemo">
			<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>

		</script>

	<!-- 表单编辑事件 -->
	<!-- 隐藏表单 -->
	<div id="editcomment" style="display: none">
		<ins class="adsbygoogle"
			style="display: inline-block; width: 300px; height: 15px"
			data-ad-client="ca-pub-6111334333458862" data-ad-slot="3820120620"></ins>


		<form class="layui-form" action="" lay-filter="example">
			<div class="layui-form-item">
				<div class="layui-inline">
					<label class="layui-form-label">评论ID</label>
					<div class="layui-input-inline">
						<input type="text" name="commentid" id="commentid"
							readonly="readonly" class="layui-input">
					</div>
				</div>
				<div class="layui-inline">
					<label class="layui-form-label">评论用户</label>
					<div class="layui-input-inline">
						<input type="text" name="username" id="username"
							readonly="readonly" class="layui-input">
					</div>
				</div>
				<div class="layui-inline">
					<label class="layui-form-label">评论内容</label>
					<div class="layui-input-inline">
						<input type="text" name="commentcontent" id="commentcontent"
							readonly="readonly" class="layui-input">
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">评论状态</label>
					<div class="layui-input-block">
						<input type="radio" name="commentstatus" value="0" title="允许显示"
							checked=""> <input type="radio" name="commentstatus"
							value="1" title="禁止显示">
					</div>
				</div>
			</div>
			<div class="layui-form-item">
				<div class="layui-input-block">
					<button class="layui-btn btn-update" lay-submit="" lay-filter="demo2">提交修改</button>
				</div>
			</div>
			
			

		</form>
	</div>





	<script src="layuiadmin/layui/layui.js"></script>
	<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->

	<script>
		layui.use('table', function() {
			var table = layui.table;

			table.render({
				elem : '#test'
				//  ,url:'/test/table/demo1.json'
				,
				url : 'listOrdercomment' //模拟接口
				,
				toolbar : '#toolbarDemo',
				title : '评论列表',
				cols : [ [ {
					type : 'checkbox',
					fixed : 'left'
				}, {
					field : 'commentid',
					title : '评论Id',
					sort : true
				}, {
					field : 'username',
					title : '评论用户',
					sort : true
				}, {
					field : 'commentcontent',
					title : '评论内容'
				}, {
					field : 'commentstatus',
					title : '评论状态',
					templet : function(res) {
						return res.commentstatus == 0 ? "允许显示" : "禁止显示";
					}
				}, {
					fixed : 'right',
					title : '操作',
					toolbar : '#barDemo',
					width : 150
				} ]

				],
				page : true,
				id:'testReload'
			});

			//头工具栏事件
			table.on('toolbar(test)', function(obj) {
				var checkStatus = table.checkStatus(obj.config.id);
				switch (obj.event) {
				case 'getCheckData':
					var data = checkStatus.data;
					layer.alert(JSON.stringify(data));
					break;
				case 'getCheckLength':
					var data = checkStatus.data;
					layer.msg('选中了：' + data.length + ' 个');
					break;
				case 'isAll':
					layer.msg(checkStatus.isAll ? '全选' : '未全选');
					break;
				}
				;
			});

			

			//监听行工具事件
			table.on('tool(test)', function(obj) {
				var data = obj.data;
				if (obj.event === 'edit') {

					//给表单元素赋值
					$("#commentid").attr("value", data.commentid);
					$("#username").attr("value", data.username);
					$("#commentcontent").attr("value", data.commentcontent);

					if (data.commentstatus == "0") {//设置性别,针对checked属性：[如果弹出层open()的 content:$("#edituser")没有.html,则用prop]
						//[如果弹出层open()的 content:$("#edituser").html,则用attr]
						$("input[name='commentstatus'][value='0']").prop(
								"checked", true);
						$("input[name='commentstatus'][value='1']").prop(
								"checked", false);
					} else {
						$("input[name='commentstatus'][value='1']").prop(
								"checked", true);
						$("input[name='commentstatus'][value='0']").prop(
								"checked", false);
					}

					layui.form.render('radio');

					//添加一个弹出层
					var index1 = layer.open({
						type : 1,
						content : $("#editcomment"),
						title : '修改评论信息',

					});

					layui.form.render();//这个是表单的render，用于处理单选框、按钮、多选框不能被选中的问题
				}
			});

			//ajax修改提交,  此处搭配监听行工具事件  的修改操作
			layui.form.on('submit(demo2)', function(data) {
				//这里输出看下json对象
				//console.log(JSON.stringify(data.field));

				$.ajax({
					type : "put",
					url : "updateOrdercomment",
					data : JSON.stringify(data.field),
					contentType : "application/json",
					success : function(cm) {
						layer.msg( cm.msg, {
							time : 10,
						}, function() {
							if (cm.msg == "修改成功") {

								layer.closeAll();
								table.reload('testReload');

							}
						});
					}

				});

				return false;
			});

			//表格数据重载，模糊查询
			var $ = layui.$, active = {
					reload : function() {
						var demoReload = $('#demoReload');

						//执行重载
						table.reload('testReload', {
							page : {
								curr : 1
							//重新从第 1 页开始
							},
							where : {
								// 		          key: {
								// 		            content: demoReload.val()
								// 		          }
								content : demoReload.val()
							}
						});
					}
				};

				$('.demoTable .layui-btn').on('click', function() {
					var type = $(this).data('type');
					active[type] ? active[type].call(this) : '';
				});
		});
	</script>
</body>
</html>